<template>
    <div class="icons">
        <swiper  :options="swiperOptions">
            <swiper-slide  v-for="item in page" :key="item.id">
                <div class="icons-item" 
                v-for="page in item"
                :key="page.id"
                >
                    <img :src="page.imgUrl" alt="">
                    <p>{{page.p}}</p>
                </div>
            </swiper-slide>
        </swiper>
    </div>
</template>
<script>
export default {
    props:["iconList"],
    data(){
        return{
            swiperOptions:{},
            
        }
    },
    computed:{
        page(){
            let pages=[];
            this.iconList.forEach((item,index)=>{
                let idx=Math.floor(index/8);
                if(!pages[idx])pages[idx]=[];
                pages[idx].push(item)
            })
            return pages;
        }
    }
}
</script>
<style scoped>
.icons{
    width: 100%;
    overflow: hidden;
    background: #fff;
}
.icons-item{
        width: 25%;
        padding-bottom: 25%;
        height: 0;
        float: left;
        /* background: #ccc; */
}
.icons-item img{
        width: 1.1rem;
        height: 1.1rem;
        display: block;
        margin: 0 auto;
        padding-top: .2rem;
}
.icons-item p{
    padding-top: 0.11rem;
font-size: .28rem;
text-align: center;
color: #212121;
}
</style>